function CPicker()
{
	this.draging = false;
	this.dragingObject = "";

	this.engin = cpicker_hsb_engin

	this._barLocation = null;
	this._mapLocation = null;
	
	this.onChange = null
	
	this.color = "FF0000";
}

CPicker.prototype.init = function()
{
	document.getElementById("cpicker_colors_select_old").style.backgroundColor = "#"+this.color

	this._initHandler()
	this.engin.display()
	this.setColor(this.color);
}

CPicker.prototype.getColor = function()
{
	var rgb = this.engin.RGB();
	return this._rgbToHex(rgb[0], rgb[1], rgb[2])
}
CPicker.prototype.setColor = function(value)
{
	value = value.replace(/[^0-9A-Fa-f]/, "").substring(0,6)
	while(value.length<6)value+="0"
	this.engin.setRGB([parseInt(value.substr(0,2),16), parseInt(value.substr(2,2),16), parseInt(value.substr(4,2),16)])
}


CPicker.prototype._initHandler = function()
{
	var thisObject = this
	document.getElementById("cpicker_bar").onmousedown = function(e)
	{
		thisObject.dragingObject = "bar";
		thisObject.draging = true;
		this.setCapture()
		this.onmousemove(e)
	}
	document.getElementById("cpicker_bar").onmouseup = function(e)
	{
		this.onmousemove(e)
		thisObject.dragingObject = "";
		thisObject.draging = false;
		this.releaseCapture()
	}
	document.getElementById("cpicker_bar").onmousemove = function(e)
	{
		if(!thisObject.draging) return;
		if(thisObject.dragingObject!="bar") return;
		var mouseY=0;
		if(window.event)
			mouseY = event.clientY + document.body.scrollTop;
		else
			mouseY = e.pageY;
		
		var bar_top = thisObject._getBarLocation()[1]
		var delta = Math.max(0, Math.min(255, mouseY - bar_top))
		thisObject.engin.setBar(255 - (delta))
		document.getElementById("cpicker_selector_bar").style.top = (delta)+"px";
	}
	
	document.getElementById("cpicker_map").onmousedown = function(e)
	{
		thisObject.dragingObject = "map";
		thisObject.draging = true;
		this.setCapture()
		this.onmousemove(e)
	}
	document.getElementById("cpicker_map").onmouseup = function(e)
	{
		this.onmousemove(e)
		thisObject.dragingObject = "";
		thisObject.draging = false;
		this.releaseCapture()
	}
	document.getElementById("cpicker_map").onmousemove = function(e)
	{
		if(!thisObject.draging) return;
		if(thisObject.dragingObject!="map") return;
		var mouseX=0;
		var mouseY=0;
		if(window.event)
		{
			mouseX = event.clientX + document.body.scrollLeft;
			mouseY = event.clientY + document.body.scrollTop;
		}
		else
		{
			mouseX = e.pageX;
			mouseY = e.pageY;
		}
		
		var map_location = thisObject._getMapLocation()
		var delta_x = Math.max(0, Math.min(255, mouseX - map_location[0]))
		var delta_y = Math.max(0, Math.min(255, mouseY - map_location[1]))
		thisObject.engin.setMap(delta_x, 255 - (delta_y))
		document.getElementById("cpicker_cursor_map").style.left = (delta_x)+"px";
		document.getElementById("cpicker_cursor_map").style.top = (delta_y)+"px";
	}
	this.engin.onChange = function()
	{
		var RGB = thisObject.engin.RGB();
		if(cpicker_text!="cpiker_rgb_r")
		document.getElementById("cpiker_rgb_r").value = RGB[0]
		if(cpicker_text!="cpiker_rgb_g")
		document.getElementById("cpiker_rgb_g").value = RGB[1]
		if(cpicker_text!="cpiker_rgb_b")
		document.getElementById("cpiker_rgb_b").value = RGB[2]
		
		var hex = this._rgbToHex(RGB[0], RGB[1], RGB[2])
		document.getElementById("cpicker_colors_select_new").style.backgroundColor = "#"+hex
		if(cpicker_text!="cpiker_hex")
		document.getElementById("cpiker_hex").value = hex
		
		if(this.onChange==null) this.onChange()
	}
	
	document.getElementById("cpiker_hsb_h").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setHSB_H(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_hsb_s").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setHSB_S(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_hsb_b").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setHSB_B(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_rgb_r").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setRGB_R(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_rgb_g").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setRGB_G(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_rgb_b").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.engin.setRGB_B(this.value)
		cpicker_text = ""
	}
	document.getElementById("cpiker_hex").onkeyup = function()
	{
		cpicker_text = this.id
		thisObject.setColor(this.value)
		cpicker_text = ""
	}
}

CPicker.prototype._getBarLocation = function()
{
	if(this._barLocation==null)
	{
		this._barLocation = [0, 0]
		var tmp = getOffsetLocation(document.getElementById("cpicker_bar"))
		this._barLocation = [tmp[0], tmp[1]]
	}
	return this._barLocation
}
CPicker.prototype._getMapLocation = function()
{
	if(this._mapLocation==null)
	{
		this._mapLocation = [0, 0]
		var tmp = getOffsetLocation(document.getElementById("cpicker_map"))
		this._mapLocation = [tmp[0], tmp[1]]
	}
	return this._mapLocation
}

CPicker.prototype._rgbToHex = function(r, g, b)
{
	return ""+this._intToHex(r)+this._intToHex(g)+this._intToHex(b)

}
CPicker.prototype._intToHex = function(val)
{
	val = (val<0?0:val>255?255:Math.round(val)).toString(16)
	return val.length>1?val:"0"+val
}

function getOffsetLocation(object)
{
	if(object==null) return [3, 3]

	var parent = getOffsetLocation(object.offsetParent)
	return [object.offsetLeft+parent[0], object.offsetTop+parent[1]]
}


function HSBEngin()
{
	this.h=0;
	this.s=0;
	this.b=0;
	
	this.rgb=null
	this.onChange = null
}
HSBEngin.prototype.display = function(value)
{
	document.getElementById("cpiker_hsb_h").value = this.h
	document.getElementById("cpiker_hsb_s").value = this.s
	document.getElementById("cpiker_hsb_b").value = this.b
	
	document.getElementById("cpicker_selector_bar").style.top = "256px"
	document.getElementById("cpicker_cursor_map").style.top = "256px"
	document.getElementById("cpicker_cursor_map").style.left = "0px"
}


HSBEngin.prototype.setBar = function(value)
{
	this.h = Math.round((value*360)/255)%360;
	this.setHSB_H(this.h)
}

HSBEngin.prototype.setMap = function(value_x, value_y)
{
	this.s = Math.round((value_x*100)/255);
	this.b = Math.round((value_y*100)/255);
	
	this.setHSB_S(this.s)
	this.setHSB_B(this.b)
}

HSBEngin.prototype.RGB = function()
{
	if(this.rgb==null)
	{
		this.rgb = this._getRGB(this.h, this.s, this.b)
		this.rgb = [Math.round(this.rgb[0]), Math.round(this.rgb[1]), Math.round(this.rgb[2])]
	}
	return this.rgb
}

HSBEngin.prototype.setRGB = function(value)
{
	var hsb = this._getHSB(value[0], value[1], value[2])
	
	this.setHSB_H(hsb[0])
	this.setHSB_S(hsb[1])
	this.setHSB_B(hsb[2])
}

HSBEngin.prototype.setHSB_H = function(value)
{
	this.h = Math.min(359, Math.max(0, Math.round(value)))
	
	if(cpicker_text!="cpiker_hsb_h")
	document.getElementById("cpiker_hsb_h").value = this.h
	
	var rgb = this._getRGB(this.h, 100, 100)
	document.getElementById("cpicker_map").style.backgroundColor="#"+this._rgbToHex(rgb[0], rgb[1], rgb[2])
	document.getElementById("cpicker_selector_bar").style.top = ((360-this.h)*255)/360+"px";
	this.rgb=null
	if(this.onChange!=null) this.onChange()
}

HSBEngin.prototype.setHSB_S = function(value)
{
	this.s = Math.min(100, Math.max(0, Math.round(value)))
	
	if(cpicker_text!="cpiker_hsb_s")
	document.getElementById("cpiker_hsb_s").value = this.s

	document.getElementById("cpicker_cursor_map").style.left = this.s*255/100+"px";
	this.rgb=null
	if(this.onChange!=null) this.onChange()
}

HSBEngin.prototype.setHSB_B = function(value)
{
	this.b = Math.min(100, Math.max(0, Math.round(value)))
	if(cpicker_text!="cpiker_hsb_b")
	document.getElementById("cpiker_hsb_b").value = this.b

	document.getElementById("cpicker_cursor_map").style.top = 255-(this.b*255/100)+"px";
	this.rgb=null
	if(this.onChange!=null) this.onChange()
}

HSBEngin.prototype.setRGB_R = function(value)
{
	var rgb = this.RGB()
	var r = Math.min(255, Math.max(0, Math.round(value)))
	this.setRGB([r, rgb[1], rgb[2]]);
}
HSBEngin.prototype.setRGB_G = function(value)
{
	var rgb = this.RGB()
	var g = Math.min(255, Math.max(0, Math.round(value)))
	this.setRGB([rgb[0], g, rgb[2]]);
}
HSBEngin.prototype.setRGB_B = function(value)
{
	var rgb = this.RGB()
	var b = Math.min(255, Math.max(0, Math.round(value)))
	this.setRGB([rgb[0], rgb[1], b]);
}


HSBEngin.prototype._getHSB = function(r, g, b)
{
	var R=r/255;
	var G=g/255;
	var B=b/255;
	var H,S,V;
	var max=R
	var min=R;
	var maxValue = 0;
	if (G > max) { max = G; maxValue = 1; }
	if (B > max) { max = B; maxValue = 2; }
		if (G < min) min = G;
	if (B < min) min = B;
		var delta = max - min;
	V = max;
	S = max ? delta/max : 0;
	if (S == 0)
		H = 1;
	else 
	{
		switch (maxValue)
		{
			case 0:
				if (G >= B)
					H = (G-B)/(6*delta);
				  else
					H = (G-B+delta)/(6*delta) + 5/6;
				break;
			case 1:
				if (B > R)
					H = (B-R)/(6*delta) + 1/3;
				else
					H = (B-R+delta)/(6*delta) + 1/6;
				break;
			case 2:
				if (R > G)
					H = (R-G)/(6*delta)  + 2/3;
				else
					H = (R-G+delta)/(6*delta) + 1/2;
				break;
		}
	}
	return [H*360,S*100,V*100];
}

HSBEngin.prototype._getRGB = function(h, s, b)
{
	var H=h/60;
	var S=s/100;
	var V=b/100;
	var R=V
	var G=V
	var B=V;
	if (S != 0 && H != -1)
	{
		var f = H % 1;

		H = parseInt(H);
		var p = V*(1-S);
		var q, t;
		if (H&1)
		{
			q = V - V*S*f;
			switch(H)
			{
				case 1: R=q; G=V; B=p; break;
				case 3: R=p; G=q; B=V; break;
				case 5: R=V; G=p; B=q; break;
			}
		}
		else
		{
			t = p + V*S*f;
			switch(H)
			{
				case 0: R=V; G=t; B=p; break;
				case 2: R=p; G=V; B=t; break;
				case 4: R=t; G=p; B=V; break;
				case 6: R=V; G=t; B=p; break;	
			}
		}
	}
	return [R*255,G*255,B*255];
}

HSBEngin.prototype._rgbToHex = function(r, g, b)
{
	return ""+this._intToHex(r)+this._intToHex(g)+this._intToHex(b)

}
HSBEngin.prototype._intToHex = function(val)
{
	val = (val<0?0:val>255?255:Math.round(val)).toString(16)
	return val.length>1?val:"0"+val
}


if (window.HTMLElement)
{
    var element = HTMLElement.prototype;

    var capture = ["click",    "mousedown", "mouseup",    "mousemove", "mouseover", "mouseout" ];

    element.setCapture = function(){
        var self = this;
        var flag = false;
        this._capture = function(e){
            if (flag) {return}
            flag = true;
            var event = document.createEvent("MouseEvents");
            event.initMouseEvent(e.type,
                e.bubbles, e.cancelable, e.view, e.detail,
                e.screenX, e.screenY, e.clientX, e.clientY,
                e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                e.button, e.relatedTarget);
            self.dispatchEvent(event);
            flag = false;
        };
        for (var i=0; i<capture.length; i++) {
            window.addEventListener(capture[i], this._capture, true);
        }
    };

    element.releaseCapture = function(){
        for (var i=0; i<capture.length; i++) {
            window.removeEventListener(capture[i], this._capture, true);
        }
        this._capture = null;
    };

}

 

var cpicker_hsb_engin = new HSBEngin()
var cpicker_text = ""